<template>
  <div class="hai-kang">
    <div class="hai-const">
      <el-scrollbar>
        <el-row>
          <el-col :span="24" :md="14">
            <div :offset-top="8">
              <div id="player"></div>
            </div>
            <el-form>
              <el-form-item>
                <!--  @change="arrangeWindow" -->
                <el-radio-group v-model="splitNum"> </el-radio-group>
                <el-button @click="wholeFullScreen" v-show="!isMoveDevice"
                  >整体全屏</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="24" :md="10">
            <div class="actions">
              <!-- <el-tabs v-model="tabActive">
                <el-tab-pane
                  key="mse"
                  tab="普通模式"
                  :disabled="!mseSupport"
                ></el-tab-pane>
                <el-tab-pane key="decoder" tab="高级模式"></el-tab-pane>
              </el-tabs> -->
              <el-form
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                v-show="tabActive !== 'log'"
              >
                <el-form-item label="回放URL">
                  <el-input
                    v-model="urls.playback"
                    clearable
                    disabled
                  ></el-input>
                  <br />
                  <!-- <el-date-picker  
                  show-time
                  placeholder="开始时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  v-model="playback.startTime"
                  :value-format="playback.valueFormat"
                >
                </el-date-picker> -->
                  <el-date-picker
                    v-model="playback.startTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择开始时间"
                  >
                  </el-date-picker>
                  <el-date-picker
                    v-model="playback.endTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择结束时间"
                  >
                  </el-date-picker>
                  <!-- <el-date-picker
                  show-time
                  placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  v-model="playback.endTime"
                  :value-format="playback.valueFormat"
                >
                </el-date-picker> -->
                </el-form-item>
                <el-form-item label="回放" class="layout">
                  <el-button
                    id="btn-playback"
                    @click="playbackStart"
                    :loading="buttonLoading"
                    >开始回放</el-button
                  >
                  <el-button id="btn-playback-pause" @click="playbackPause"
                    >暂停</el-button
                  >
                  <el-button id="btn-playback-sesume" @click="playbackResume"
                    >恢复</el-button
                  >
                  <!-- <el-button id="btn-playback-stop" @click="stopPlay">停止回放</el-button> -->
                  <!-- <br /> -->
                  <!-- <el-button id="btn-playback-one" @click="frameForward" v-show="tabActive === 'decoder'">单帧</el-button> -->
                  &nbsp;
                  <el-date-picker
                    type="datetime"
                    placeholder="定位时间点"
                    style="margin-left: 20px"
                    format="YYYY-MM-DD HH:mm:ss"
                    v-model="playback.seekStart"
                    value-format="YYYY-MM-DDTHH:mm:ss.SSSZ"
                  >
                  </el-date-picker>
                  &nbsp;<el-button @click="seekTo">定位</el-button>
                </el-form-item>

                <el-form-item label="抓图">
                  <el-button id="btn-capture-jpeg" @click="capture('JPEG')"
                    >抓取JPEG</el-button
                  >
                  <el-button id="btn-record-mp4" @click="recordStart('MP4')"
                    >录制MP4</el-button
                  >
                  <el-button id="btn-record-save" @click="recordStop"
                    >停止录制并保存文件</el-button
                  >
                  <br />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import axios from "axios";
import { dayjs, ElMessage } from "element-plus";

interface HostGlobal extends Window {
  /** 引入的海康监控 */ JSPlugin: any;
}
const MSE_IS_SUPPORT = true; // 是否支持mse

const tabActive = MSE_IS_SUPPORT ? "mse" : "decoder";
const labelCol = { span: 5 };
const wrapperCol = { span: 18 };
const hostGlobal: HostGlobal = window as any;
const IS_MOVE_DEVICE = false; // 是否移动设备
const isMoveDevice = IS_MOVE_DEVICE;
const splitNum = ref(1);
const route = useRoute();
const preLoading = ref(false);
const buttonLoading = ref(false);

const urls = ref({
  realplay: "",
  talk: "wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S",
  playback: "ws://ydriver-car-image.cyberstone.com.cn:559/openUrl/Ycmq67C",
});
const playback = ref({
  startTime: "" as any,
  endTime: "" as any,
  // valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
  seekStart: "",
  rate: "" as any,
});
let videoPoint = "";
let player: any = null;
console.log("//////", route.query);
if (route.query) {
  const { url, startTIme, endTime, point } = route.query as any;

  urls.value.playback = url;

  playback.value.startTime = startTIme;
  playback.value.endTime = endTime;
  videoPoint = point;
}
onMounted(() => {
  createPlayer();
  // previewURLs();
  setTimeout(() => {
    playbackStart();
  }, 200);
});
/**预览 */
const realplay = (url: string) => {
  const { playURL, mode, index } = {
    playURL: url,
    mode: 0,
    index: 0,
  };
  player.JS_Play(playURL, { playURL, mode }, index).then(
    () => {
      console.log("realplay success");
    },
    (e: any) => {
      console.error(e);
    }
  );
};
const createPlayer = () => {
  player = new hostGlobal.JSPlugin({
    szId: "player",
    szBasePath: "/public-assets/static/",
    iMaxSplit: 4,
    // iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
    iCurrentSplit: 1,
    openDebug: true,
    oStyle: {
      borderSelect: IS_MOVE_DEVICE ? "#000" : "#FFCC00",
    },
  });

  // 事件回调绑定
  player.JS_SetWindowControlCallback({
    windowEventSelect: function (iWndIndex: any) {
      //插件选中窗口回调
      console.log("windowSelect callback: ", iWndIndex);
    },
    pluginErrorHandler: function (
      iWndIndex: any,
      iErrorCode: any,
      oError: any
    ) {
      //插件错误回调
      console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
    },
    windowEventOver: function () {
      //鼠标移过回调
      //console.log(iWndIndex);
    },
    windowEventOut: function () {
      //鼠标移出回调
      //console.log(iWndIndex);
    },
    windowEventUp: function () {
      //鼠标mouseup事件回调
      //console.log(iWndIndex);
    },
    windowFullCcreenChange: function (bFull: any) {
      //全屏切换回调
      console.log("fullScreen callback: ", bFull);
    },
    firstFrameDisplay: function (iWndIndex: any, iWidth: any, iHeight: any) {
      //首帧显示回调
      console.log("firstFrame loaded callback: ", iWndIndex, iWidth, iHeight);
    },
    performanceLack: function () {
      //性能不足回调
      console.log("performanceLack callback: ");
    },
  });
};
function playbackPause() {
  player.JS_Pause().then(
    () => {
      console.log("playbackPause success");
    },
    (e: any) => {
      console.error(e);
    }
  );
}
function playbackResume() {
  player.JS_Resume().then(
    () => {
      console.log("playbackResume success");
    },
    (e: any) => {
      console.error(e);
    }
  );
}
function recordStop() {
  const index = player.currentWindowIndex;

  player.JS_StopSave(index).then(
    () => {
      console.log("record stoped, saving ...");
    },
    (e: any) => {
      console.error(e);
    }
  );
}
function playbackStart() {
  buttonLoading.value = true;
  preLoading.value = true;

  const tzstart = dayjs(playback.value.startTime).format(
    "YYYY-MM-DDTHH:mm:ss.SSSZ"
  );
  const tzend = dayjs(playback.value.endTime).format(
    "YYYY-MM-DDTHH:mm:ss.SSSZ"
  );

  const { playURL, mode, index, startTime, endTime } = {
    playURL: urls.value.playback,
    mode: 0,
    index: 0,
    startTime: tzstart,
    endTime: tzend,
  };
  console.log("........", playURL, mode, index, startTime, endTime);

  player.JS_Play(playURL, { playURL, mode }, index, startTime, endTime).then(
    () => {
      console.log("playbackStart success");
      buttonLoading.value = false;
      preLoading.value = false;
      playback.value.rate = 1;
    },
    (e: any) => {
      console.error(e);
      buttonLoading.value = false;
      preLoading.value = false;
    }
  );
}
/**全屏 */
const wholeFullScreen = () => {
  player.JS_FullScreenDisplay(true).then(
    () => {
      console.log(`wholeFullScreen success`);
    },
    (e: any) => {
      console.error(e);
    }
  );
};
function seekTo() {
  let { seekStart, endTime } = toRefs(playback.value);
  console.log(seekStart);
  console.log(endTime);
  player
    .JS_Seek(player.currentWindowIndex, seekStart.value, endTime.value)
    .then(
      () => {
        console.log("seekTo success");
      },
      (e: any) => {
        console.error(e);
      }
    );
}
function capture(imageType: any) {
  const index = player.currentWindowIndex;

  player.JS_CapturePicture(index, "img", imageType).then(
    () => {
      console.log("capture success", imageType);
    },
    (e: any) => {
      console.error(e);
    }
  );
}

function recordStart(type: any) {
  const codeMap: any = { MP4: 5, PS: 2 };

  const index = player.currentWindowIndex,
    fileName = `${dayjs(Date.now()).format("YYYY-MM-DD HH:mm:ss")}.mp4`,
    typeCode = codeMap[type];

  player.JS_StartSaveEx(index, fileName, typeCode).then(
    () => {
      console.log("record start ...");
    },
    (e: any) => {
      console.error(e);
    }
  );
}
onUnmounted(() => {});
</script>

<style lang="scss">
.hai-kang {
  body {
    padding: 8px 8px 32px;
  }
  .layout {
    align-items: center;
  }
  .el-row {
    background-color: #fff;
    padding-top: 50px;
    margin-top: 20px;
  }

  .actions {
    padding-left: 8px;
    padding-right: 15px;
  }

  .el-form-item {
    margin-bottom: 5px;
  }
  .el-date-editor {
    margin-top: 18px;
  }

  .icon-wrapper {
    position: relative;
    padding-left: 20px;
  }
  .icon-wrapper .anticon {
    position: absolute;
    top: -2px;
    width: 16px;
    height: 16px;
    line-height: 1;
    font-size: 16px;
    left: 0;
  }

  ::-webkit-media-controls {
    display: none !important;
  }
  // #player {
  //   width: 700px;
  //   height: 600px;
  // }
  @media screen and (max-width: 991px) {
    #player {
      width: calc(100vw - 16px);
      height: calc((100vw - 16px) * 5 / 8);
    }
  }
  @media screen and (min-width: 992px) {
    #player {
      width: calc(45vw - 8px);
      height: calc((50vw - 8px) * 5 / 8);
    }
  }
  .el-input {
    margin-bottom: 15px;
    margin-right: 15px;
  }
  .el-date-editor.el-input {
    width: 200px;
  }
}
</style>
